<script setup lang="ts" name="GoodsSku">
  import {GoodsInfo ,valuesType,Specs} from '@/types/goods'
  import bwPowerSet from '@/utils/bwPowerset'
  
  const emit = defineEmits<{
  (e: 'changeSku', skuId: string): void
  }>()

  const props =defineProps<{
    goodsInfo:GoodsInfo
    skuId?:string
  }>()
  // 控制高亮选中函数
  const changeSelected =(sub:valuesType,item:Specs)=>{
    if(sub.disabled)return
    if(sub.selected){
      sub.selected=false
    }else{
      // 排他 干掉其他复活自己
      item.values.forEach(val=>{
        val.selected=false
      })
      sub.selected=true
    }
   
    defaultDisabled()
    // 用户选择完整的规格后提交信息
    const fullArr =orderKey().filter(v=>v)
    if(fullArr.length===props.goodsInfo.specs.length){
      // 从字典中查询对应规格的skuId
      const submitSkuId = pathMap[fullArr.join('+')][0]
      // 将id提交给父组件
      emit('changeSku',submitSkuId)
    }
  }
  // 获取路径字典
  const getMap=()=>{
    // const obj:any ={}
    const obj:{[key:string]:string[]}={}
    // 将有效的sku过滤出来
      const skus= props.goodsInfo.skus.filter(item=>item.inventory>0)
      // 求子集 
      // 将每一项的valueName收集到一个数组中
      skus.forEach(sku =>{
       const arr =  sku.specs.map(specs=>specs.valueName)
        const sets = bwPowerSet(arr)
        
        sets.forEach(set=>{
          const key = set.join('+')
          if(obj[key]){
            obj[key].push(sku.id)
          }else{
            obj[key] = [sku.id]
          }
        })
      })      
    return obj
  }
  const pathMap = getMap()
  // 基于做好的路径字典 做按钮的默认禁用
  const defaultDisabled = ()=>{
    const arr = orderKey()
    props.goodsInfo.specs.forEach((spec,index)=>{
      // 每一行规格对象
      spec.values.forEach(btnObj=>{
        // btnObj是每一个按钮对象
        const newArr = [...arr]
        newArr[index] = btnObj.name
        const key = newArr.filter(item=>item).join('+')
        // 在字典中存在不禁用 不存在则禁用
        console.log(key);
        
        if(pathMap[key]){
          btnObj.disabled=false
        }else{
          btnObj.disabled=true
        }
      })
    })
  }
  defaultDisabled()
  // 点击收集一个有顺序的键的集合 组合按钮禁用
  function orderKey(){
    const arr:string[] =['','',''] 
    props.goodsInfo.specs.forEach((spec,index)=>{
      // 找到被选中的按钮
      const btnObj = spec.values.find(btnObj=>btnObj.selected===true)
      // 将按钮的文本放入数组中对应的位置
      if(btnObj){
        arr[index]=btnObj.name
      }else{
        arr[index]=''
      }
    })
    return arr
  }
  const defaultSelected=()=>{
    if(!props.skuId)return //如果没传就return
    const sku= props.goodsInfo.skus.find(item=>item.id===props.skuId)
    if(sku){
      props.goodsInfo.specs.forEach((spec,index)=>{
        spec.values.forEach(btnObj=>{
          if(btnObj.name===sku.specs[index].valueName){
            btnObj.selected=true
          }
        })
      })
    }
  }
  // 默认组合禁用
  defaultSelected()
  if(props.skuId){
    defaultDisabled()
  }
</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in goodsInfo.specs" :key="item.id">
      <dt>{{item.name}}</dt>
      <!-- selected 高亮   disabled 禁用-->
      <dd>
        <template v-for="sub in item.values" :key="sub.name">
          <img @click="changeSelected(sub,item)" 
          :class="{selected:sub.selected,disabled:sub.disabled}"
          :src="sub.picture"
          v-if="sub.picture"
        />
        <span @click="changeSelected(sub,item)" 
        :class="{selected:sub.selected,disabled:sub.disabled}" v-else>{{sub.name}}</span>
        </template>
      </dd>
    </dl>
    <!-- <dl>
      <dt>尺寸</dt>
      <dd>
        <span class="disabled">10英寸</span>
        <span class="selected">20英寸</span>
        <span>30英寸</span>
      </dd>
    </dl>
    <dl>
      <dt>版本</dt>
      <dd>
        <span>美版</span>
        <span>港版</span>
      </dd>
    </dl> -->
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
